<template>
	<div>
		<h2>数组原型方法：详情请看代码</h2>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

let arr: Array<any> = [11, 2, 6, 4, 1, 9, 2, 0, 1, 22]
// 数组原型方法：
// arr = arr.join(',') // 分割原数组转换为字符串
// arr.push(9) // 添加到原数组最后一项
// arr.pop() // 删除原数组最后一项
// arr.unshift(9) // 添加到原数组开头
// arr.shift() // 删除原数组第一项
// arr = arr.sort((x, y) => x - y) // 数组排序
// arr = arr.reverse() // 反转数组顺序
// arr = arr.concat([123]) // 合并数组
// arr = arr.slice(0, 2) // 合并数组，截取数组，(开始索引,结束索引)
// arr.splice(0, 2, 3, 12) // 它有很多种用法，可以实现删除 (删除结束索引, 删除结束索引)，插入和替换(删除结束索引, 删除结束索引, 插入)。
// console.log(arr.indexOf(123)) // 查找数组数据放回索引，没有则返回-1，从数组的开头（位置0）开始向后查找(从前往后找)
// console.log(arr.lastIndexOf(11)) // 查找数组数据放回索引，没有则返回-1，从数组的末尾开始向前查找（从后往前找）

// 数组迭代方法：
/*
		forEach()（ES5新增）：对数组的每一项运行给定函数，该方法没有返回值
		map()（ES5新增）：对数组的每一项运行给定函数，返回每次函数调用结果所组成的数组
		filter()（ES5新增）：对数组的每一项运行给定函数，返回该函数会返回true的项组成的数组
		every()（ES5新增）：对数组中的每一项运行都给定函数，如果该函数对每一项都返回true，则返回true
		some（ES5新增）：对数组中的每一项运行给定函数，如果该函数对任意一项返回，则返回true
		reduce()和reduceRight()（ES5新增）：这两个方法都会迭代数组所有的项，然后构建一个最终的值返回
		*/

// total：return返回参数，current：循环数据，index：索引（从1开始）
// 想将索引从0开始，在方法后添加0即可，例如：reduce(()=>{},0)
// arr.reduce((total, current, index) => total + current) // 累加
arr = arr.reduce((total, current, index) => {
	// 判断total中是否包含current
	if (!total.includes(current)) {
		return total.concat(current)
	} else {
		return total
	}
}, []) // 去重
console.log(arr)
</script>

<style scoped lang="scss"></style>
